<template>
  <!-- 底部部分 => list有数据的时候，才展示  list.length > 0 -->
  <footer class="footer" v-if="list.length > 0">
    <span class="todo-count"><strong>{{num}}</strong>剩余</span>
    <ul class="filters">
      <li>
        <a href="#/" :class="{ selected: status === 'all'}" @click="$emit('status-event', 'all')">全部</a>
      </li>
      <li>
        <a href="#/active" :class="{ selected: status === 'undone'}" @click="$emit('status-event', 'undone')">进行中</a>
      </li>
      <li>
        <a href="#/completed" :class="{ selected: status === 'done'}" @click="$emit('status-event', 'done')">已完成</a>
      </li>
    </ul>

    <button class="clear-completed" @click="$emit('clearall-event')">
      清除已完成
    </button>
  </footer>
</template>
 
<script>
export default {
  name: "hm-footer",
  components: {},
  props: {
    list: {
      type: Array,
      required: true,
    },
    status: {
      type: String,
      required: true,
      validator(value) {
        return ["all", "done", "undone"].includes(value);
      },
    }
  },
  data() {
    return {};
  },
  computed: {
    num(){
      return this.list.filter(item => item.done === false).length
    }
  },
  watch: {},
  created() {},
  methods: {}
};
</script>

<style scoped>
     
</style>
